<template>
	<view class="container">
		<view class="head">
			<u-icon @click="return_btn" name="arrow-left" color="#fff" size="30"></u-icon>
			<u-text text="输入核销码" color="#fff" size="22" align="center" margin="4vh 0px 0px 0px"></u-text>
		</view>
		<view class="search">
			<view class="search-box">
				<text>输入核销码</text>
				<view class="info">
					<input />
					<view class="sub" @click="sub()">
						<u-text text="识别" align="center" lineHeight="5vh" color="#fff" size="14"></u-text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			sub() {
				uni.$u.route('/pages/ls/enterVerificationOperation/enterVerificationOperation');
			},
			return_btn() {
				uni.$u.route('/pages/lzx/business/homePage');
			}
		}
	}
</script>

<style lang="scss">
	page {
		overflow: hidden;
	}

	.container {
		height: 100vh;
	}

	.head {
		background-color: #3183FB;
		width: 100%;
		height: 250px;
		overflow: auto;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.search {
		box-sizing: border-box;
		padding: 30rpx 25rpx;
		background-color: white;
		width: 90vw;
		height: 90vh;
		margin: 0 auto;
		transform: translateY(-25vh);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;

		.search-box {
			display: flex;

			text {
				font-size: 32rpx;
				color: #3183FB;
				line-height: 6vh;
			}

			.info {
				border: 1px solid #c8c8c8;
				border-radius: 40rpx;
				width: 58vw;
				height: 6vh;
				margin-left: 2vw;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 5rpx 0 1em;

				input {
					width: 35vw;
					height: 6vh;
				}

				.sub {
					background-color: #3183FB;
					width: 20vw;
					height: 5vh;
					border-radius: 40rpx;
				}
			}
		}
	}
</style>